<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="nav-bar">
			<view class="left">
				<u-icon name="arrow-left" size="32" color="#333" @click="goBack"></u-icon>
			</view>
			<view class="title">评估报告</view>
			<view class="right">
				<u-icon name="share" size="32" color="#333" @click="handleShare"></u-icon>
			</view>
		</view>
		
		<!-- 报告内容 -->
		<scroll-view class="report-scroll" scroll-y>
    <view class="report-container">
				<!-- 评估概览 -->
				<view class="overview-card">
					<view class="header">
						<text class="title">评估概览</text>
						<text class="time">{{reportData.time}}</text>
					</view>
					
					<view class="content">
						<view class="score-box">
							<text class="label">评估得分</text>
							<text class="score">{{reportData.score}}</text>
							<text class="unit">分</text>
						</view>
						
						<view class="level-box">
							<text class="label">风险等级</text>
							<view class="level" :class="reportData.level">
								<text>{{reportData.levelText}}</text>
							</view>
						</view>
					</view>
				</view>
				
				<!-- 详细分析 -->
				<view class="analysis-card">
					<view class="header">
						<text class="title">详细分析</text>
					</view>
					
					<view class="content">
						<view class="analysis-item" v-for="(item, index) in reportData.analysis" :key="index">
							<view class="item-header">
								<text class="name">{{item.name}}</text>
								<text class="score">{{item.score}}分</text>
        </view>
        
							<view class="progress">
								<view class="progress-bar" :style="{width: item.percent + '%'}"></view>
        </view>
        
							<view class="desc">{{item.desc}}</view>
						</view>
            </view>
        </view>
        
        <!-- 建议 -->
				<view class="suggestion-card">
					<view class="header">
						<text class="title">健康建议</text>
					</view>
					
					<view class="content">
						<view class="suggestion-item" v-for="(item, index) in reportData.suggestions" :key="index">
							<view class="icon-box">
								<u-icon :name="item.icon" size="32" color="#1890FF"></u-icon>
							</view>
							<text class="text">{{item.text}}</text>
                </view>
            </view>
        </view>
        
				<!-- 行动方案 -->
				<view class="action-card">
					<view class="header">
						<text class="title">行动方案</text>
					</view>
					
					<view class="content">
						<view class="action-item" v-for="(item, index) in reportData.actions" :key="index">
							<view class="step">
								<text class="number">{{index + 1}}</text>
							</view>
							<view class="info">
								<text class="title">{{item.title}}</text>
								<text class="desc">{{item.desc}}</text>
							</view>
						</view>
					</view>
        </view>
			</view>
		</scroll-view>
    </view>
</template>

<script>
export default {
    data() {
        return {
				reportData: {
					time: '2024-03-20 14:30',
					score: 75,
					level: 'medium',
					levelText: '中风险',
					type: 'stroke',
					analysis: [
						{
							name: '生活习惯',
							score: 80,
							percent: 80,
							desc: '您的日常生活习惯较好，继续保持'
						},
						{
							name: '饮食健康',
							score: 70,
							percent: 70,
							desc: '饮食结构基本合理，建议增加蔬菜摄入'
						},
						{
							name: '运动情况',
							score: 60,
							percent: 60,
							desc: '运动量不足，建议每周增加运动时间'
						}
					],
                suggestions: [
						{
							icon: 'heart',
							text: '保持规律作息，保证充足睡眠'
						},
						{
							icon: 'food',
							text: '增加蔬菜水果摄入，减少高盐高脂食物'
						},
						{
							icon: 'running',
							text: '每周进行3-5次有氧运动，每次30分钟以上'
						}
					],
					actions: [
						{
							title: '制定运动计划',
							desc: '每周固定时间进行运动，建议选择快走、游泳等有氧运动'
						},
						{
							title: '调整饮食结构',
							desc: '增加蔬菜水果比例，减少高盐高脂食物摄入'
						},
						{
							title: '定期健康检查',
							desc: '每3个月进行一次血压、血糖等基础检查'
						}
                ]
            }
        }
    },
		onLoad(options) {
			// 根据参数获取报告类型
			if (options.type) {
				this.loadReportData(options.type, options.score);
			}
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			handleShare() {
				uni.showToast({
					title: '分享功能开发中',
					icon: 'none'
				})
			},
			loadReportData(type, score) {
				// 模拟从服务器获取报告数据
				// 实际应用中应该调用API获取报告数据
				uni.showLoading({
					title: '加载报告...'
				});
				
				setTimeout(() => {
					// 根据不同的评估类型设置不同的报告内容
					switch(type) {
						case 'stroke':
							this.reportData.type = 'stroke';
							this.reportData.levelText = score < 3 ? '低风险' : (score < 6 ? '中风险' : '高风险');
							this.reportData.level = score < 3 ? 'low' : (score < 6 ? 'medium' : 'high');
							break;
						case 'behavior':
							this.reportData.type = 'behavior';
							this.reportData.levelText = score < 2 ? '需要改善' : (score < 4 ? '一般' : '良好');
							this.reportData.level = score < 2 ? 'high' : (score < 4 ? 'medium' : 'low');
							break;
						case 'impulse':
							this.reportData.type = 'impulse';
							this.reportData.levelText = score < 3 ? '冲动行为倾向较低' : (score < 5 ? '冲动行为倾向一般' : '冲动行为倾向较高');
							this.reportData.level = score < 3 ? 'low' : (score < 5 ? 'medium' : 'high');
							break;
						case 'efficacy':
						case 'decision':
						case 'recurrence':
							this.reportData.type = type;
							this.reportData.levelText = score < 2 ? '较差' : (score < 4 ? '一般' : '良好');
							this.reportData.level = score < 2 ? 'high' : (score < 4 ? 'medium' : 'low');
							break;
						default:
							this.reportData.type = 'general';
							this.reportData.levelText = '一般';
							this.reportData.level = 'medium';
					}
					
					// 设置评分
					this.reportData.score = score || 75;
					
					// 设置时间
					this.reportData.time = this.getCurrentTime();
					
					uni.hideLoading();
				}, 1000);
			},
			getCurrentTime() {
				const now = new Date();
				const year = now.getFullYear();
				const month = now.getMonth() + 1;
				const day = now.getDate();
				const hours = now.getHours();
				const minutes = now.getMinutes();
				const seconds = now.getSeconds();
				
				// 格式化为：2023年06月15日 14:30:00
				return `${year}年${month < 10 ? '0' + month : month}月${day < 10 ? '0' + day : day}日 ${hours < 10 ? '0' + hours : hours}:${minutes < 10 ? '0' + minutes : minutes}:${seconds < 10 ? '0' + seconds : seconds}`;
			}
    }
}
</script>

<style lang="scss">
	.container {
    min-height: 100vh;
		background-color: #F7F7FA;
		
		.nav-bar {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 30rpx;
        background-color: #fff;
        
        .title {
            font-size: 36rpx;
            font-weight: bold;
            color: #333;
			}
		}
		
		.report-scroll {
			height: calc(100vh - 100rpx);
			
			.report-container {
				padding: 30rpx;
				
				.overview-card {
					background-color: #fff;
					border-radius: 20rpx;
					padding: 30rpx;
					margin-bottom: 30rpx;
					
					.header {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 30rpx;
						
						.title {
							font-size: 32rpx;
							font-weight: bold;
							color: #333;
        }
        
        .time {
            font-size: 24rpx;
            color: #999;
        }
    }
    
					.content {
						display: flex;
						justify-content: space-around;
						align-items: center;
						
						.score-box {
							text-align: center;
							
							.label {
								font-size: 24rpx;
								color: #999;
								margin-bottom: 10rpx;
							}
							
							.score {
								font-size: 48rpx;
        font-weight: bold;
								color: #1890FF;
							}
							
							.unit {
								font-size: 24rpx;
								color: #999;
								margin-left: 10rpx;
							}
						}
						
						.level-box {
            text-align: center;
							
							.label {
								font-size: 24rpx;
								color: #999;
								margin-bottom: 10rpx;
							}
							
							.level {
								padding: 10rpx 30rpx;
								border-radius: 30rpx;
								font-size: 28rpx;
								color: #fff;
            
            &.low {
									background-color: #52c41a;
            }
            
            &.medium {
									background-color: #faad14;
            }
            
            &.high {
									background-color: #ff4d4f;
								}
							}
						}
					}
				}
				
				.analysis-card {
					background-color: #fff;
					border-radius: 20rpx;
					padding: 30rpx;
					margin-bottom: 30rpx;
					
					.header {
						margin-bottom: 30rpx;
						
						.title {
							font-size: 32rpx;
                font-weight: bold;
							color: #333;
						}
					}
					
					.content {
						.analysis-item {
							margin-bottom: 30rpx;
							
							&:last-child {
								margin-bottom: 0;
							}
							
							.item-header {
								display: flex;
								justify-content: space-between;
								align-items: center;
								margin-bottom: 20rpx;
								
								.name {
									font-size: 28rpx;
									color: #333;
								}
								
								.score {
                font-size: 28rpx;
									color: #1890FF;
									font-weight: bold;
								}
							}
							
							.progress {
								height: 10rpx;
								background-color: #F7F7FA;
								border-radius: 5rpx;
								margin-bottom: 20rpx;
								
								.progress-bar {
									height: 100%;
									background-color: #1890FF;
									border-radius: 5rpx;
								}
							}
							
							.desc {
								font-size: 24rpx;
								color: #666;
								line-height: 1.4;
							}
						}
					}
				}
				
				.suggestion-card {
        background-color: #fff;
					border-radius: 20rpx;
        padding: 30rpx;
					margin-bottom: 30rpx;
					
					.header {
						margin-bottom: 30rpx;
						
						.title {
							font-size: 32rpx;
							font-weight: bold;
							color: #333;
						}
					}
					
					.content {
            .suggestion-item {
                display: flex;
							align-items: center;
                margin-bottom: 20rpx;
                
                &:last-child {
                    margin-bottom: 0;
                }
                
							.icon-box {
								width: 60rpx;
								height: 60rpx;
								background-color: #e6f7ff;
								border-radius: 30rpx;
								display: flex;
								align-items: center;
								justify-content: center;
								margin-right: 20rpx;
							}
							
							.text {
                    font-size: 28rpx;
								color: #333;
							}
						}
					}
				}
				
				.action-card {
					background-color: #fff;
					border-radius: 20rpx;
					padding: 30rpx;
					
					.header {
						margin-bottom: 30rpx;
						
						.title {
							font-size: 32rpx;
							font-weight: bold;
							color: #333;
						}
					}
					
					.content {
						.action-item {
							display: flex;
							margin-bottom: 30rpx;
							
							&:last-child {
								margin-bottom: 0;
							}
							
							.step {
								width: 60rpx;
								height: 60rpx;
								background-color: #1890FF;
								border-radius: 30rpx;
        display: flex;
								align-items: center;
								justify-content: center;
								margin-right: 20rpx;
								
								.number {
									font-size: 28rpx;
									color: #fff;
									font-weight: bold;
								}
							}
							
							.info {
								flex: 1;
								
								.title {
									font-size: 28rpx;
									color: #333;
									font-weight: bold;
									margin-bottom: 10rpx;
								}
								
								.desc {
									font-size: 24rpx;
									color: #666;
									line-height: 1.4;
								}
							}
						}
					}
				}
        }
    }
}
</style> 